<template>
  <div>
    <el-row :gutter="gutter" style="margin: 0">
      <el-col :span="span" style="padding-left: 0" v-if="show(0)">
        <el-select v-model="province"
                   :size="size"
                   :disabled="disabled"
                   :placeholder="placeholders[0] ? placeholders[0] : '请选择'"
                   :filterable="searchable"
                   @change="changeProvince"
                   style="width:100%">
          <el-option :label="value" :value="value" v-for="(value, key) in provinceList" :key="key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="span" v-if="show(1)" :style="{'padding-right': level===1 ? 0 : '5px'}">
        <el-select v-model="city"
                   :size="size"
                   :disabled="disabled"
                   :placeholder="placeholders[1] ? placeholders[1] : '请选择'"
                   :filterable="searchable"
                   @change="changeCity"
                   style="width:100%">
          <el-option :label="city" :value="city" v-for="(city, key) in filterCity" :key="key"></el-option>
        </el-select>
      </el-col>
      <el-col :span="spanlast" style="padding-right: 0" v-if="show(2)" >
        <el-select v-model="town"
                   :size="size"
                   :disabled="disabled"
                   :placeholder="placeholders[2] ? placeholders[2] : '请选择'"
                   :filterable="searchable"
                   @change="changeTown"
                   style="width:100%">
          <el-option :label="town" :value="town" v-for="(town, key) in filterTown" :key="key"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <slot></slot>
  </div>
</template>

<script>
import areaData from '@/constants/area';
export default {
    name: 'alSelector',
    props: {
        gutter: {
            type: [String, Number],
            default: 10
        },
        span: {
            type: [String, Number],
            default: 8
        },
        placeholders: {
            type: Array,
            default: () => []
        },
        size: {
            type: String,
            default: 'medium',
            validator: (val) => ['small', 'medium', 'mini'].indexOf(val) > -1
        },
        searchable: {
            type: Boolean,
            default: false
        },
        data: {
            type: Array,
            default: null
        },
        level: {
            type: Number,
            default: 2, // 0-->一联 1->二联 2->三联
            validator: (val) => [0, 1, 2].indexOf(val) > -1
        },
        type: {
            type: String,
            default: 'code', //  code-返回行政区域代码 text-返回文本 all-返回 code 和 text
            validator: (val) => ['all', 'code', 'text'].indexOf(val) > -1
        },
        spanlast: {
            type: [String, Number],
            default: 8
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            province: this.data[0] || '',
            city: this.data[1] || '',
            town: this.data[2] || '',
            name: 'auto'
        };
    },
    computed: {
        showLevel () {
            return parseInt(this.level);
        },
        provinceList () {
            return areaData[86];
        },
        filterCity () {
            const target = Object.entries(this.provinceList).find(([key, value]) => value === this.province);
            const key = target ? target[0] : '';
            return areaData[key] || [];
        },
        filterTown () {
            const target = Object.entries(this.filterCity).find(([key, value]) => value === this.city);
            const key = target ? target[0] : '';
            return areaData[key] || [];
        }
    },
    watch: {
        data: {
            handler (newValue) {
                const [province, city, town] = newValue || ['', '', ''];
                this.province = province;
                this.city = city;
                this.town = town;
                if (this.province === '北京市' || this.province === '上海市' || this.province === '天津市' || this.province === '重庆市') {
                    this.city = '市辖区';
                }
                if (this.city === '那曲地区') {
                    this.city = '那曲市';
                }
                if (this.town === '滦县') {
                    this.town = '滦州市';
                } else if (this.town === '屯留县') {
                    this.town = '屯留区';
                } else if (this.town === '潞城市') {
                    this.town = '潞城区';
                } else if (this.town === '怀仁县') {
                    this.town = '怀仁市';
                } else if (this.town === '济阳县') {
                    this.town = '济阳区';
                } else if (this.town === '邹平县') {
                    this.town = '邹平市';
                } else if (this.town === '荔浦县') {
                    this.town = '荔浦市';
                } else if (this.town === '兴仁县') {
                    this.town = '兴仁市';
                } else if (this.town === '马龙县') {
                    this.town = '马龙区';
                } else if (this.town === '达孜县') {
                    this.town = '达孜区';
                }
                this.name = 'auto';
            },
            deep: true
        }
    },
    updated () {
        let data;
        if (this.showLevel === 0) {
            data = [this.province];
        } else if (this.showLevel === 1) {
            data = [this.province, this.city];
        } else {
            data = [this.province, this.city, this.town];
        }
        this.$emit('change', data, this.name);
    },
    methods: {
        changeProvince (province) {
            this.name = 'handle';
            this.city = '';
            this.town = '';
            const cityList = Object.values(this.filterCity);
            if (cityList.length === 1) {
                this.city = cityList[0];
            }
        },
        changeCity (city) {
            this.name = 'handle';
            this.town = '';
        },
        changeTown () {
            this.name = 'handle';
        },
        show (level) {
            if (level <= this.showLevel) {
                return true;
            } else {
                return false;
            }
        }
    }
};
</script>
